import { App } from 'vue';
import { createRouter, RouteRecordRaw, createWebHistory } from 'vue-router';
// import { loadDemo } from '@/service/packages';

const history = createWebHistory('plugin');

export const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    redirect: '/list',
    // component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/list',
    name: 'List',
    component: () => import('@/views/list/index.vue'),
  },
  {
    path: '/doc/:name',
    name: 'Doc',
    component: () => import('@/views/doc/index.vue'),
  },
  {
    path: '/package',
    name: 'Package',
    children: [
      {
        path: 'im',
        name: 'PackageIm',
        children: [
          {
            path: 'demo',
            name: 'PackageImDemo',
            component: () => import('packages/im/demo/demo01.vue'),
          },
        ],
      },
      {
        path: 'mock',
        name: 'PackageMock',
        children: [
          {
            path: 'demo',
            name: 'PackageMockDemo',
            component: () => import('packages/mock/demo/demo01.vue'),
          },
        ],
      },
      {
        path: 'editor',
        name: 'PackageEditor',
        children: [
          {
            path: 'demo',
            name: 'PackageEditorDemo',
            component: () => import('packages/editor/demo/demo01.vue'),
          },
        ],
      },
      {
        path: 'file-preview',
        name: 'PackageFilePreview',
        children: [
          {
            path: 'demo',
            name: 'PackageFilePreviewDemo',
            component: () => import('packages/filePreview/demo/demo01.vue'),
          },
        ],
      },
    ],
  },
  // {
  //   path: '/package/:name',
  //   name: 'Package',
  //   component: () => import('@/views/package/index.vue'),
  // },
  {
    path: '/:path(.*)*',
    name: 'error404',
    component: () => import('@/views/error-page/404.vue'),
  },
];

const router = createRouter({
  history,
  routes,
});

export async function setupRouter(app: App) {
  router.beforeEach(async (to, from, next) => {
    if (to.name === 'Package') {
      //await loadDemo(to.params.name as string, app);
      next();
    } else {
      next();
    }
  });
  app.use(router);
}
export default router;
